<template>
  <div class="history-box">
    <van-nav-bar
      title="阅读历史"
      left-text="返回"
      left-arrow
      @click-left="handleReturn"
      fixed
      placeholder
    />
    <div class="content-box">
      <div class="content-header">
        我已读过
        <span>{{historyCount}}</span>本书
      </div>
      <div class="content-book">
        <div v-for="(item, index) in historyList" :key="index" class="book-item">
          <div class="book-time">{{item.time}}</div>
          <div class="book-list">
            <detailCard
              v-for="(cItem,cIndex) in item.bookList"
              :key="cIndex"
              :name="cItem.name"
              :writer="cItem.writer"
              :is_over="cItem.is_over"
              :type="cItem.type"
              :intro="cItem.intro"
              :image="cItem.image"
              :id="cItem.id"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Taro from "@tarojs/taro";
import DetailCard from "@components/DetailCard";
import _ from "lodash";
export default {
  name: "history",
  components: { DetailCard },
  data() {
    return {
      historyList: [],
    };
  },
  computed: {
    historyCount() {
      let count = 0;
      this.historyList.forEach((item) => {
        count = count + item.bookList.length;
      });
      return count;
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let history = Taro.getStorageSync("bookList");
      if (history) {
        history = JSON.parse(history);
        Object.entries(history).forEach(([key, value]) => {
          history[key]['id'] = parseInt(key)
        })
        let _history = _.groupBy(history, (item) =>
          item.lastReadTime.split("/").join("-").slice(0, 9)
        );
        Object.entries(_history).forEach(([key, value]) => {
          console.log(_history)
          this.historyList.push({ time: key, bookList: value });
        });
        this.historyList = _.sortBy(this.historyList, item => {
          return item.time;
        }).reverse();
      }
    },
    handleReturn() {
      Taro.navigateBack();
    },
  },
};
</script>

<style scoped>
.history-box {
  min-height: 100vh;
  background: rgba(245, 248, 252, 1);
}
.content-header {
  font-size: 30px;
  padding: 20px 40px;
}
.content-header span {
  color: rgba(145, 199, 255, 1);
  padding: 0 10px;
}
.content-book {
  border-top: 4px solid #e2e2e2;
  border-bottom: 4px solid #e2e2e2;
  padding: 0px 0px 0px 40px;
}
.book-item {
  padding: 20px 20px 20px 40px;
  border-left: 4px solid #e2e2e2;
  border-bottom: 4px solid #e2e2e2;
}
.book-item:last-child {
  border-bottom: none;
}
.book-time {
  font-size: 28px;
  color: rgba(6, 27, 65, 0.35);
  margin-bottom: 20px;
  position: relative;
}
.book-time::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  left: -56px;
  top: 8px;
  border: 4px solid #91c7ff;
  border-radius: 40px;
  background: white;
}
.book-list {
}
.book-list div {
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 20px;
}
.book-list div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
</style>